<template>
  <div class="info">
    <div class="tab">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
        <el-tab-pane
          v-for="(item, index) in Tabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <div v-if="index === 0">
            <el-form ref="form" :model="form" label-width="100px">
              <el-row>
                <el-col :span="20">
                  <el-form-item label="商品名">
                    <el-input
                      v-model="form.shopName"
                      placeholder="请输入商品名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="店铺名">
                    <el-select
                      filterable
                      v-model="form.storeId"
                      placeholder="请选择"
                      @change="changeSelectStore"
                    >
                      <el-option
                        v-for="item in storeArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="商品类型">
                    <el-radio-group
                      v-model="form.is_onlineId"
                      @change="changeOnline"
                    >
                      <el-radio label="1">线上</el-radio>
                      <el-radio label="0">线下</el-radio>
                      <el-radio label="2">线上线下</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <!-- 线上商品分类 -->
                  <el-form-item
                    label="商品分类"
                    v-if="form.is_onlineId == 1 || form.is_onlineId == 2"
                  >
                    <el-cascader
                      :props="optionProps"
                      :options="shopTypeArr"
                      v-model="form.shopTypeId"
                    >
                      <template slot-scope="{ data }">
                        <span>{{ data.name }}</span>
                      </template>
                    </el-cascader>
                  </el-form-item>
                  <!-- 线下商品分类 -->
                  <el-form-item
                    label="商品分类"
                    v-if="form.is_onlineId == 0 || form.is_onlineId == 2"
                  >
                    <el-select
                      filterable
                      v-model="form.shopTypeId1"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in shopTypeArr1"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="商品首图">
                    <el-upload
                      v-loading="loading1"
                      class="avatar-uploader"
                      :http-request="upLoadRirstServe"
                      action=""
                      :show-file-list="false"
                    >
                      <img
                        v-if="form.firstImageUrl"
                        :src="form.firstImageUrl"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="商品轮播图">
                    <el-upload
                      action=""
                      list-type="picture-card"
                      :http-request="upLoadServe"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      :limit="10"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="form.imageUrl" alt="" />
                    </el-dialog>
                  </el-form-item>
                  <el-form-item label="价格">
                    <el-input
                      v-model="form.price"
                      placeholder="请输入价格"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="销量">
                    <el-input
                      v-model="form.sale"
                      placeholder="请输入销量"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="是否首页推荐" prop="resource">
                    <el-radio-group v-model="form.is_recom">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="是否上架" prop="resource">
                    <el-radio-group v-model="form.state">
                      <el-radio label="1">上架</el-radio>
                      <el-radio label="2">下架</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="handleNext">下一步</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="index === 1">
            <div class="guige_row">
              <!-- <div class="clo">
                <div>id：</div>
              </div> -->
              <div class="clo">
                <div>规格（限制27个字）：</div>
              </div>
              <div class="clo">
                <div>价格：</div>
              </div>
              <div class="clo">
                <div>库存：</div>
              </div>
              <div class="clo">
                <div>状态：</div>
              </div>
              <div class="clo">
                <div>操作：</div>
              </div>
            </div>
            <div
              class="guige_row"
              v-for="(item, index) in guigeArr"
              :key="index"
            >
              <!-- <div class="clo">
                <div>{{ item.id }}</div>
              </div> -->
              <div class="clo">
                <el-input maxlength="27" v-model="item.name"></el-input>
              </div>
              <div class="clo">
                <el-input v-model="item.price"></el-input>
              </div>
              <div class="clo">
                <el-input v-model="item.stock"></el-input>
              </div>
              <div class="clo">
                <el-switch
                  class="tablescope"
                  v-model="item.status"
                  :active-value="0"
                  :inactive-value="1"
                  active-text="禁用"
                  inactive-text="启用"
                  inactive-color=""
                >
                </el-switch>
              </div>
              <div class="clo cz hand_cs" @click="handleDeleteGuige(index)">
                <i class="el-icon-delete"></i>
              </div>
            </div>
            <el-button type="primary" @click="handleAddGuige"
              >添加新规格</el-button
            >
            <div class="next">
              <el-button @click="handleBack">上一步</el-button>
              <el-button type="primary" @click="handleNext">下一步</el-button>
            </div>
          </div>
          <div v-if="index === 2">
            <el-row class="rich_text">
              <el-col :span="12">
                <!-- <EditorBar
                  v-if="EditorTxt !== '' && rowData.id"
                  :EditorTxt="EditorTxt"
                  v-model="txtInfo"
                  :isClear="isClear"
                  @getEditorTxt="getEditorTxt"
                ></EditorBar>
                <EditorBar
                  v-if="!rowData.id"
                  :EditorTxt="EditorTxt"
                  v-model="txtInfo"
                  :isClear="isClear"
                  @getEditorTxt="getEditorTxt"
                ></EditorBar> -->
                <EditorBar
                  :EditorTxt="EditorTxt"
                  v-model="txtInfo"
                  :isClear="isClear"
                  @getEditorTxt="getEditorTxt"
                ></EditorBar>
              </el-col>
            </el-row>
            <div class="next">
              <el-button @click="handleBack">上一步</el-button>
              <el-button type="primary" @click="handleSubmit">保存</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import EditorBar from "@/components/wangEditor.vue";
import {
  shopCategory,
  shopCategory1,
  add_shop,
  shopDetail,
} from "@/api/mall_management";
import { allStore } from "@/api/shopSystem";
import upImg from "@/utils/upimg";
export default {
  props: ["rowData"],
  components: { EditorBar },
  data() {
    return {
      loading1: false,
      activeName: "0",
      Tabs: [
        { title: "基础信息" },
        { title: "规格库存" },
        { title: "商品详情" },
        { title: "资质上传" },
      ],
      shopTypeArr: [], //线上商品分类
      shopTypeArr1: [], //线下商品分类
      guigeArr: [], //规格
      EditorTxt: "", //富文本内容
      page: {
        total: 0,
        pageNum: 1, // 当前页数
        pageSize: 10, // 每页的条数
      },
      form: {
        storeId: "",
        shopName: "",
        shopTypeId: "",
        shopTypeId1: "",
        firstImageUrl: "", //首图
        imageUrl: "", //轮播图
        price: "",
        sale: "",
        is_onlineId: "1",
        is_recom: "0", //是否首页推荐
        state: "1", //1上架  2下架
      },
      storeArr: [], //店铺
      optionProps: {
        value: "id",
        label: "name",
        children: "children",
        checkStrictly: true,
      },
      fileList: [],
      fileListId: [],
      fileListArr: [],
      firstImageUrlId: "", //商品首图id
      dialogVisible: false,
      txtInfo: "1212",
      isClear: false,
      pid: "",
      editorContent: "", //富文本内容
    };
  },
  methods: {
    async add_shop() {
      let cateobj = {};
      if (this.form.is_onlineId == "1") {
        //线上
        cateobj = {
          pt_cate: this.form.shopTypeId[0], //一级
          pt_cate_sub:
            this.form.shopTypeId.length === 2 ? this.form.shopTypeId[1] : "",
        };
      } else if (this.form.is_onlineId == "0") {
        //线下
        cateobj = {
          cate: this.form.shopTypeId1, //一级
        };
      } else if (this.form.is_onlineId == "2") {
        //全部
        cateobj = {
          pt_cate: this.form.shopTypeId[0], //一级
          pt_cate_sub:
            this.form.shopTypeId.length === 2 ? this.form.shopTypeId[1] : "",
          cate: this.form.shopTypeId1, //一级
        };
      }
      const { err, msg } = await add_shop(
        Object.assign(
          {
            pid: this.pid,
            name: this.form.shopName,
            sid: this.form.storeId,
            thumb: this.firstImageUrlId, //商品首图
            image: this.fileListArr.join(","), //轮播图
            oprice: this.form.price,
            sale: this.form.sale,
            is_online: this.form.is_onlineId,
            is_recom: this.form.is_recom,
            status: this.form.state, //上架下架
            specs: JSON.stringify(this.guigeArr), //规格
            description: this.EditorTxt,
            type: 1,
          },
          cateobj
        )
      );
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: `${msg}`,
          type: "error",
        });
      }
    },
    //商品详情
    async shopDetail() {
      const { data, err } = await shopDetail({
        pid: this.rowData.id,
      });
      if (err === 0) {
        this.pid = data.id;
        this.form.shopName = data.name;
        this.form.storeId = data.store.id; //店铺名
        // this.form.shopTypeArr = data.cate_text; //商品分类
        this.form.shopTypeId = [data.pt_cate, data.pt_cate_sub]; //线上商品分类
        this.form.firstImageUrl = data.thumb.src; //商品首图
        this.firstImageUrlId = data.thumb.at_id; //商品首图id
        data.image.forEach((item) => {
          item.url = item.src;
        });
        this.fileList = data.image;
        console.log(this.fileList);
        //图片id暂未夫赋值
        this.form.price = data.price;
        this.form.sale = data.sale;
        this.form.is_onlineId = data.is_online.toString();
        this.form.is_recom = data.is_recom.toString(); //是否首页推荐
        this.form.state = data.status.toString(); //1上架  2下架
        this.EditorTxt = data.description;
        //规格
        data.specs.forEach((item) => {
          this.guigeArr.push({
            id: item.id,
            name: item.name,
            stock: item.stock,
            status: item.status,
            price: item.price,
          });
        });
        //线下商品分类
        this.shopCategory1_edit(data.store.id, data.cate);
      }
    },
    //获取店铺
    async allStore() {
      const { data, err } = await allStore({});
      if (err === 0) {
        this.storeArr = data;
      }
    },
    //线上商品类型
    async shopCategory() {
      const { data, err } = await shopCategory({});
      if (err === 0) {
        this.shopTypeArr = data;
      }
    },
    //线下编辑回填商品分类
    async shopCategory1_edit(id, cate) {
      const { data, err } = await shopCategory1({
        storeId: id,
      });
      if (err === 0) {
        this.shopTypeArr1 = data;
        this.form.shopTypeId1 = cate;
      }
    },
    //线下编辑回填商品分类
    async shopCategory1_add(id) {
      const { data, err } = await shopCategory1({
        storeId: id,
      });
      if (err === 0) {
        this.shopTypeArr1 = data;
      }
    },
    //上传图片轮播图
    upLoadServe(file) {
      upImg.upimg(
        (data) => {
          //state判断是首图还是轮播图
          this.fileListId.push({ id: data.data.url, name: file.file.name });
          this.fileListArr = this.fileListId.map((item) => {
            return item.id;
          });
          this.loading2 = false;
        },
        1,
        file
      );
    },
    //上传首图
    upLoadRirstServe(file) {
      this.loading1 = true;
      upImg.upimg(
        (data) => {
          this.form.firstImageUrl = data.data.pre_img;
          this.firstImageUrlId = data.data.url;
          this.loading1 = false;
        },
        1,
        file
      );
    },
    //店铺名change
    changeSelectStore() {
      console.log(this.form.is_onlineId);
      if (this.form.is_onlineId == "0" || this.form.is_onlineId == "2") {
        //线下
        this.shopCategory1_add(this.form.storeId);
      }
    },
    //线上还是线下change
    changeOnline(e) {
      if (e === "1") {
        //线上
      } else {
        //线下
        if (this.form.storeId) {
          this.shopCategory1_add(this.form.storeId);
        }
      }
    },
    //提交
    handleSubmit() {
      console.log(this.fileListArr);
      console.log(this.fileList);
      if (this.fileList) {
        //如果有旧图片
        this.fileList.forEach((item) => {
          this.fileListArr.push(item.at_id);
        });
      }
      this.add_shop();
    },

    //上一步
    handleBack() {
      if (this.activeName === "1") {
        this.activeName = "0";
      } else if (this.activeName === "2") {
        this.activeName = "1";
      }
    },
    //下一步
    handleNext() {
      if (this.activeName === "0") {
        this.activeName = "1";
      } else if (this.activeName === "1") {
        this.activeName = "2";
      }
    },
    handleTabClick(tab) {
      if (Number(tab.index) < 2) console.log(tab.index);
    },
    //商品图
    handlePictureCardPreview(file) {
      this.form.imageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除商品图
    handleRemove(file, fileList) {
      //原来的图片
      this.fileList = fileList;
      //添加的图片
      this.fileListId.forEach((item, index) => {
        if (file.name === item.name) {
          this.fileListId.splice(index, 1);
        }
      });
      this.fileListArr = this.fileListId.map((item) => {
        return item.id;
      });
    },
    //添加规格
    handleAddGuige() {
      this.guigeArr.push({
        name: "",
        price: "",
        status: 0,
        stock: "",
      });
    },
    //删除规格
    handleDeleteGuige(index) {
      this.guigeArr.splice(index, 1);
    },
    //富文本
    getEditorTxt(val) {
      this.EditorTxt = val;
    },
  },
  created() {
    this.allStore();
    this.shopCategory();

    if (this.rowData.id) {
      //编辑
      this.$nextTick(() => {
        this.shopDetail();
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.tbImg1 {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.slt {
  width: 50px;
  height: 36px;
  margin: 0 auto;
  .tbImg {
    width: 50px;
    height: 36px;
    border-radius: 8px;
  }
}
.info {
  .title {
    font-size: 16px;
    margin-bottom: 13px;
  }
  .tab {
    background-color: #fff;
    // padding: 20px;
    // box-sizing: border-box;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
/deep/.el-breadcrumb__inner {
  cursor: pointer !important;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
/deep/.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
/deep/.el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  border: 0 !important;
}
.guige_row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
  .clo {
    width: 20%;
    display: flex;
    justify-content: center;
    .el-input {
      width: 90%;
    }
  }
  //   .clo:nth-child(1) {
  //     width: 15%;
  //   }
  .cz {
    font-size: 26px;
  }
}
.rich_text {
  height: 500px;
}
.next {
  padding-top: 20px;
  box-sizing: border-box;
}
.avatar-uploader {
  width: 80px;
  height: 80px;
}
</style>
